//高清图片
@mixin img-dpr() {
    background-image: url(image.jpg); //默认
    [data-dpr="2"] & {
        background-image: url(image@2x.jpg); //两倍高清
    }
    [data-dpr="3"] & {
        background-image: url(image@3x.jpg); //三倍高清
    }
}

// 字体的转换
@mixin font-dpr ($font-size) {
    font-size: $font-size;
    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }
    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

//border:1px 的做法
@mixin border-dpr($side, $size, $color) {
    #{$side}: $size solid $color;
    [data-dpr="2"] & {
        #{$side}: $size * 2 solid $color;
    }
    [data-dpr="3"] & {
        #{$side}: $size * 3 solid $color;
    }
}

// px转换为rem
@function px2rem ($px, $base-font-size: 64px) {
    @if unitless($px) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2rem($px * 1px);
    }
    @else if unit($px)==rem {
        @return $px;
    }
    @return ($px / $base-font-size) * 1rem;
}